<template>
	<view class="content">
		<!-- 分段器 -->
		<view class="subsection-wrapper">
			<u-subsection :list="list" :current="current" mode="subsection" @change="sectionChange" bgColor='#fff'></u-subsection>
		</view>
		<!-- 按钮 -->
		<!-- <view class="contentButton">
			<view style="margin: 0 20rpx;">
				<u-icon name="reload" @click="getList" size="28"></u-icon>
			</view>
		
		</view> -->
		<!-- 列表 -->
<view class="list-container">
	<u-list @scrolltolower="scrolltolower" @scroll="onscroll" :scrollTop="scrollTop" class="list-inner">
		<u-list-item :key="index" v-for="(item,index) in InvestigationList">
			<uni-card :is-shadow="true" @click="handleListItemClick(item)">
				<view style="width: 100%;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">项目编号</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.hiddenCode?item.hiddenCode:''}}</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">项目名称</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.hiddenName?item.hiddenName:''}}</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">开始时间</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.hiddenStartTime?item.hiddenStartTime:''}}</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">结束时间</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.hiddenEndTime?item.hiddenEndTime:''}}</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">发起人</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.hiddenUserName?item.hiddenUserName:''}}</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">任务数量</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout ">{{item.count?item.count:''}}</view>
						</u-col>
					</u-row>
				</view>
			</uni-card>
		</u-list-item>
		<u-empty mode="list" marginTop="200" v-if="InvestigationList.length==0">
		</u-empty>
	</u-list>
</view>
		<!-- <l-pagination v-model="queryParams.pageNum" :total="total" :page-size="queryParams.pageSize" :pager-count="3"
			v-if="total>0" @change="changes" /> -->
		<!-- 新增、修改模态框 -->
		<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel" showCancelButton="true">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth='90'>
				<u-form-item label="用户昵称" prop="userInfo.nickName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.nickName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="账号" prop="userInfo.userName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.userName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="用户密码" prop="userInfo.password" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="任务数量" prop="userInfo.number" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.number" border="none"></u--input>
				</u-form-item>
				<u-form-item label="发送次数" prop="userInfo.sendCount" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.sendCount" border="none"></u--input>
				</u-form-item>
				<u-form-item label="状态" prop="userInfo.status" borderBottom ref="item1">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</u-modal>
		<!-- 删除模态框 -->
		<u-modal :show="showDetle" title="删除提示" :content='content' @confirm="confirmDetle" @cancel="cancelDetle"
			showCancelButton="true"></u-modal>
		<!-- 新增状态确认弹窗 -->
		<u-modal :show="showStatusModal" :title="statusModalTitle" @confirm="confirmStatus" @cancel="cancelStatus"
			showCancelButton="true">
			<u--form labelPosition="left" :model="statusForm" :rules="statusRules" ref="statusFormRef" :labelWidth='90'>
				<u-form-item label="是否正常" prop="isNormal" borderBottom>
					<u-radio-group v-model="statusForm.isNormal" placement="row">
						<u-radio label="0" :name="0">正常</u-radio>
						<u-radio label="1" :name="1">异常</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--textarea v-model="statusForm.remark" placeholder="请输入备注信息" :height="150" />
				</u-form-item>
				<u-form-item label="检查照片" borderBottom>
					<view class="photo-container" @click="takePhoto">
						<image v-if="statusForm.photoUrl" :src="statusForm.photoUrl" mode="aspectFill"
							class="photo-img"></image>
						<view v-else class="photo-placeholder">点击拍照</view>
					</view>
				</u-form-item>
			</u--form>
		</u-modal>

		<!-- 手写签名弹窗 -->
		<u-modal :show="showSignatureModal" :title="signatureModalTitle" @confirm="confirmSignature"
			@cancel="cancelSignature" showCancelButton="true">
			<view class="signature-container">
				<view class="signature-tip">请在下方区域手写签名</view>
				<canvas class="signature-canvas" canvas-id="signatureCanvas" @touchstart="startSign"
					@touchmove="moveSign" @touchend="endSign"></canvas>
				<view class="signature-btns">
					<u-button @click="clearSignature">清除</u-button>
				</view>
			</view>
		</u-modal>

		<!-- 加载 -->
		<u-loading-page :loading="showLoading"></u-loading-page>
		<u-back-top :scroll-top="innerScrollTop" top="100" @click="changes"></u-back-top>
		<tabBar selectedIndex=2 v-if="storage_data=='create'"></tabBar>
		<tabBar selectedIndex=0 v-else></tabBar>
	</view>
</template>

<script>
	import {
		groupListInvestigation
	} from '@/api/system/pcqd.js'
	export default {
		data() {
			return {
				indexList: [],

				show: false,
				title: '标题',
				content: '是否删除选中数据',
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				// 基本案列数据
				radiolist1: [{
						name: '正常',
						disabled: false
					},
					{
						name: '停用',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '正常',
				checkboxValue1: [],
				showDetle: false,
				list: ['开启', '结束'],
				current: 0,
				InvestigationList: [],
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 999,
					hiddenName: null,
					hiddenCode: null,
					hiddenStatus: 1,
					hiddenBw: null,
					hiddenYuan: null,
					hiddenLocation: null,
					hiddenCs: null,
					hiddenNormal: null,
					hiddenRemak: null,
					hiddenPcName: null,
					hiddenPcNumber: null,
					hiddenUserName: null,
					createTime: null,
				},
				showStatusModal: false,
				statusModalTitle: '检查状态确认',
				currentItem: null,
				statusForm: {
					isNormal: '',
					remark: '',
					photoUrl: ''
				},
				statusRules: {
					isNormal: {
						type: 'string',
						required: true,
						message: '请选择是否正常',
						trigger: ['blur', 'change']
					}
				},

				// 手写签名相关
				showSignatureModal: false,
				signatureModalTitle: '请手写签名',
				signatureCtx: null,
				signaturePoints: [],
				isSigning: false,
				showLoading: false,
				scrollTop: 0,
				innerScrollTop: 0,
				storage_data:''
			}
		},
		created() {
			this.getList()
			this.storage_data = uni.getStorageSync('storage_data').user_roles[0];
		},
		onReady() {
			uni.hideTabBar() //隐藏导航栏方法
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			changes(e) {
				// console.log('e', e)
				// this.queryParams.pageNum = e
				// this.getList()
				this.scrollTop = this.innerScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				})
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 滚动动画时长，单位ms
				})

			},
			onscroll(e) {
				// console.log('onscroll:', e);
				this.innerScrollTop = e
			},
			handleListItemClick(item) {
				console.log('点击')
				console.log('info_det===', item);
				uni.setStorageSync('jump_info', item);
				uni.navigateTo({
					url: '/pages/pcqd/index'
				});
			},

			// 拍照功能
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						// 这里可以添加时间水印逻辑
						this.statusForm.photoUrl = res.tempFilePaths[0];
					}
				});
			},

			// 确认状态信息
			confirmStatus() {
				this.$refs.statusFormRef.validate().then(() => {
					// 表单验证通过，显示签名弹窗
					this.showStatusModal = false;
					this.showSignatureModal = true;
					// 初始化签名画布
					this.initSignatureCanvas();
				}).catch(error => {
					console.log('表单验证失败', error);
				});
			},

			// 取消状态信息
			cancelStatus() {
				this.showStatusModal = false;
			},

			// 初始化签名画布
			initSignatureCanvas() {
				this.signatureCtx = uni.createCanvasContext('signatureCanvas', this);
				this.signatureCtx.lineWidth = 3;
				this.signatureCtx.lineCap = 'round';
				this.signatureCtx.lineJoin = 'round';
				this.signatureCtx.strokeStyle = '#000000';
				// 清空画布
				this.clearSignature();
			},

			// 开始签名
			startSign(e) {
				this.isSigning = true;
				const {
					x,
					y
				} = e.touches[0];
				this.signaturePoints.push({
					x,
					y
				});
				this.signatureCtx.beginPath();
				this.signatureCtx.moveTo(x, y);
			},

			// 签名中
			moveSign(e) {
				if (!this.isSigning) return;
				const {
					x,
					y
				} = e.touches[0];
				this.signaturePoints.push({
					x,
					y
				});
				this.signatureCtx.lineTo(x, y);
				this.signatureCtx.stroke();
				this.signatureCtx.draw(true);
			},

			// 结束签名
			endSign() {
				this.isSigning = false;
				this.signatureCtx.draw(true);
			},

			// 清除签名
			clearSignature() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.signature-canvas').boundingClientRect(rect => {
					this.signatureCtx.clearRect(0, 0, rect.width, rect.height);
					this.signatureCtx.draw();
					this.signaturePoints = [];
				}).exec();
			},

			// 确认签名
			confirmSignature() {
				if (this.signaturePoints.length === 0) {
					uni.showToast({
						title: '请先完成签名',
						icon: 'none'
					});
					return;
				}

				// 保存签名为图片
				uni.canvasToTempFilePath({
					canvasId: 'signatureCanvas',
					success: (res) => {
						// 提交所有数据
						this.submitAllData(res.tempFilePath);
					}
				}, this);
			},

			// 取消签名
			cancelSignature() {
				this.showSignatureModal = false;
				// 可以选择是否重新显示状态确认弹窗
				// this.showStatusModal = true;
			},

			// 提交所有数据
			submitAllData(signatureUrl) {
				// 构建提交数据
				const submitData = {
					investigationId: this.currentItem.id,
					isNormal: this.statusForm.isNormal,
					remark: this.statusForm.remark,
					photoUrl: this.statusForm.photoUrl,
					signatureUrl: signatureUrl,
					// 更新状态为已完成
					status: 2
				};

				// 调用API提交数据
				updateInvestigationStatus(submitData).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						this.showSignatureModal = false;
						// 重新获取列表数据
						this.getList();
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					console.log('提交失败', error);
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					});
				});
			},

			getList() {
				let that = this
				that.showLoading = true
				console.log('that.queryParams.hiddenStatus', that.queryParams.hiddenStatus)
				groupListInvestigation(that.queryParams.hiddenStatus).then(res => {
					// setTimeout(() => {
						that.showLoading = false
					// }, 1000)
					that.InvestigationList = res.rows
					that.total = res.total
					console.log('that.total', that.total)
				})
			},
			sectionChange(index) {
				console.log('index', index + 1)
				this.current = index;
				this.queryParams.hiddenStatus = index + 1
				this.getList()
				// if(index==0){
				// 	this.current = index;
				// 	this.queryParams.hiddenStatus = 1
				// 	this.getList()
				// }else{
				// 	this.current = index;
				// 	this.queryParams.hiddenStatus = 2
				// 	this.getList()
				// }
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			handleAdd() {
				this.show = true;
				this.title = '新增'
			},
			handleUpdate() {
				this.show = true;
				this.title = '修改'
			},
			handleDelete() {
				this.showDetle = true
			},
			confirm() {
				this.show = false;
				console.log('点击确认')
			},
			cancel() {
				this.show = false;
				console.log('点击取消')
			},
			confirmDetle() {
				this.showDetle = false;
				console.log('点击确认')
			},
			cancelDetle() {
				this.showDetle = false;
				console.log('点击取消')
			},
			scrolltolower() {
				this.loadmore();
			},
			loadmore() {

			},
		},
	}
</script>

<style scoped>
	.content{
		position: relative;
		
	}
	.contentButton {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.custom-style {
		width: 150rpx;
		margin: 0 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	/* 新增样式 */
	.photo-container {
		width: 100%;
		height: 200rpx;
		border: 1px dashed #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.photo-img {
		width: 100%;
		height: 100%;
	}

	.photo-placeholder {
		color: #999;
	}

	.signature-container {
		padding: 20rpx;
	}

	.signature-tip {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.signature-canvas {
		width: 100%;
		height: 300rpx;
		border: 1px solid #ccc;
	}

	.signature-btns {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.u-modal__content {
		justify-content: flex-start;
	}
	.subsection-wrapper{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	.subsection-wrapper ::v-deep .u-subsection {
		height: 40px !important;
		
	}

	.subsection-wrapper ::v-deep .u-subsection__item {
		height: 40px !important;
		line-height: 40px !important;
		font-size: 14px !important;
	}
	/* 列表容器 */
	.list-container {
		/* margin-top 通过动态样式设置 */
		min-height: calc(100vh - 150px);
		/* 确保最小高度 */
		position: absolute;
		top: 50px;
		padding-bottom: 100px;
		width: 100%;
	}

	.list-inner {
		height: 100%;
	}
	.contentButton {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx;
	}
</style>